<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>类组件</title>
</head>

<body>
    <div id="app"></div>

    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
    <script type="text/babel">
        function MySub2() {
            return (
                <div>
                    <h2>我是子组件2</h2>
                </div>
            )
        }

        // 类组件必须继承React.Component
        class MyParent extends React.Component {

            // 必须定义render()方法，必须返回jsx对象
            render() {
                return (
                    <div>
                        <h1>我是类组件，也是父组件</h1>
                        <MySub1 />
                        <MySub2 />
                        <this.MySub3 />
                    </div>
                )
            }

            MySub3() {
                return (
                    <div>
                        <h2>我是子组件3</h2>
                    </div>
                )
            }
        }

        class MySub1 extends React.Component {

            render() {
                return (
                    <div>
                        <h2>我是子组件1</h2>
                    </div>
                )
            }
        }

        const app = document.querySelector("#app");
        const root = ReactDOM.createRoot(app);

        root.render(<MyParent />);
    </script>
</body>
</html>